import React,{Component} from 'react';
import { 
    View, 
    ScrollView,
    StyleSheet,
    FlatList, 
    Image, 
    Text,
    Alert,
    TouchableWithoutFeedback, 
    StatusBar,
} from 'react-native';
import Loading from 'react-native-lindf-loading';
import Header from '../header/Header';
export default class ShopTab extends Component {

    // 初始化数据
    constructor(props) {
        super(props);
        this.state = {
            lists: [
                {
                    id: 1,
                    time: '2017-3-20 15:30',
                    isChecked: false,
                    thumb: 'http://h.hiphotos.baidu.com/zhidao/pic/item/3bf33a87e950352ae1dc27695243fbf2b2118b15.jpg',
                    content: '固特异工艺手工鞋 高级定致 制鞋 固特异工艺手工鞋',
                    number: '2',
                    price: '50.00',
                },
                {
                    id: 2,
                    time: '2017-3-20 16:00',
                    isChecked: false,
                    thumb: 'http://pic26.nipic.com/20130105/10770379_104350027000_2.jpg',
                    content: '这是某种鞋，这是某种鞋，这是某种鞋，这是某种鞋，这是某种鞋，这是某种鞋。',
                    number: '1',
                    price: '160.00',
                },
                {
                    id: 3,
                    time: '2017-3-20 17:00',
                    isChecked: false,
                    thumb: 'http://a3.topitme.com/1/1c/0e/11279745270640e1c1o.jpg',
                    content:'高级定致 制鞋 固特异工艺手工鞋',
                    number: '2',
                    price: '150.00',
                },
                {
                    id: 4,
                    time: '2017-3-21 15:30',
                    isChecked: false,
                    thumb: 'http://pic19.nipic.com/20120327/7795154_010706239000_2.jpg',
                    content: '高端定制鞋子',
                    number: '4',
                    price: '360.00',
                },
                {
                    id: 5,
                    time: '2017-3-21 16:00',
                    isChecked: false,
                    thumb: 'http://img1.juimg.com/141016/330705-14101615230845.jpg',
                    content: '这是某种鞋，这是某种鞋，这是某种鞋，这是某种鞋，这是某种鞋，这是某种鞋。',
                    number: '3',
                    price: '250.00',
                },
                {
                    id: 6,
                    time: '2017-3-21 16:30',
                    isChecked: false,
                    thumb: 'http://img4.duitang.com/uploads/item/201602/08/20160208065203_hiwAW.jpeg',
                    content: '固特异工艺手工鞋 高级定致 制鞋 固特异工艺手工鞋',
                    number: '2',
                    price: '200.00',
                }
            ],
            isModal:false,
            isAllChecked: false,
            allMoney: '0.00',
            showDel: false,
            hasChoose: '',
            tabIndex: 2,
            refresh: true,
        };
        this.renderNewsItem = this.renderNewsItem.bind(this);
        this.checkAll = this.checkAll.bind(this);
        this.allChecked = this.allChecked.bind(this);
        this.changeDel = this.changeDel.bind(this);
        this.delSettlement = this.delSettlement.bind(this);
    }

    componentWillMount(){
        global.ShopTabIndex = this;
    }

    _showModal() {
        this.setState({
            isModal:true
        })

        setTimeout(() => {
            this.setState({
                isModal:false
            });
        }, 300)
    }

    _onRequestClose() {
        this.setState({
            isModal:false
        });
    }

    // 触发单选并循环判断是否都选中
    checkAll(event){
        let _this = this;
        let lists = this.state.lists;
        lists[event].isChecked = !lists[event].isChecked;
        this.setState({
            lists: lists
        },function(){
            let isChange = true;
            let allMoney = 0;
            let hasChoose = [];
            for(let i=0;i<_this.state.lists.length;i++){
                if(!_this.state.lists[i].isChecked){
                    isChange = false;
                }else {
                    hasChoose.push(_this.state.lists[i].id+','+_this.state.lists[i].number);
                    allMoney += Number(_this.state.lists[i].price) * Number(_this.state.lists[i].number)
                }
            }
            if(isChange){
                _this.setState({
                    isAllChecked: true,
                    allMoney: allMoney.toFixed(2),
                    hasChoose: hasChoose,
                });
            }else {
                _this.setState({
                    isAllChecked: false,
                    allMoney: allMoney.toFixed(2),
                    hasChoose: hasChoose,
                });
            }
        });
    }

    // 触发全选
    allChecked(){
        let _this = this;
        if(this.state.isAllChecked){
            let lists = _this.state.lists;
            for(let i=0;i<_this.state.lists.length;i++){
                lists[i].isChecked = false;
            }
            _this.setState({
                isAllChecked: false,
                lists: lists,
                allMoney: '0.00',
                hasChoose: []
            });
        }else {
            let lists = _this.state.lists;
            let allMoney = 0;
            let hasChoose = [];
            for(let i=0;i<_this.state.lists.length;i++){
                lists[i].isChecked = true;
                hasChoose.push(_this.state.lists[i].id+','+_this.state.lists[i].number);
                allMoney += Number(_this.state.lists[i].price) * Number(_this.state.lists[i].number)
            }
            _this.setState({
                isAllChecked: true,
                lists: lists,
                allMoney: allMoney.toFixed(2),
                hasChoose: hasChoose
            });
        }
    }

    // 显示与隐藏删除按钮和结算按钮
    changeDel(){
        this.setState({
            showDel: !this.state.showDel
        });
    }

    // 删除和结算操作
    delSettlement(index){
        let _this = this;
        if(index==0){
            // 删除
            let hasObj = false;
            let newLists = _this.state.lists;
            for(let i=0;i<_this.state.lists.length;i++){
                if(_this.state.lists[i].isChecked){
                    hasObj = true;
                    newLists.splice(i,1);
                    i--;
                }
            }
            if(hasObj){
                this.setState({
                    lists: newLists,
                    allMoney: '0.00',
                    hasChoose: []
                });
            }else {
                // this._showModal()
                this.alertFun('请选择需要删除的商品！');
            }
        }else{
            // 结算
            if(this.state.hasChoose.length > 0){
                // alert('可以结算了！')
                this.props.navigate('ConfirmOrder', {id: 10});
            }else {
                this.alertFun('请选择结算的商品！')
            }
        }
    }

    // 提示对话框
    alertFun(mess){
        Alert.alert(
          '提示',
          mess,
          [
            {text: '确定', onPress: () => console.log('确定')},
          ],
        )
    }

    // 商品列表循环
    renderNewsItem() {
        // 数组
        let itemAry = [];
        // 遍历
        let _this = this;
        for (let i = 0; i<_this.state.lists.length; i++) {
            itemAry.push(
                <View key={i} style={styles.item}>
                    <TouchableWithoutFeedback onPress={()=>_this.checkAll(i)}>
                        <View style={styles.itemChild}>
                            <View style={styles.itemChildTop}>
                                {
                                    _this.state.lists[i].isChecked?
                                        <View style={[styles.itemChildTopText,styles.itemChildTopTextActiveColor]}></View>
                                        :
                                        <View style={[styles.itemChildTopText,styles.itemChildTopTextColor]}></View>
                                }
                            </View>
                            <View style={styles.itemChildCenter}>
                                <Image 
                                    style={styles.itemChildCenterImg}
                                    source={{uri: _this.state.lists[i].thumb}}
                                />
                            </View>
                            <View style={styles.itemChildBottom}>
                                <Text numberOfLines={2} style={styles.itemChildBottomText}>{_this.state.lists[i].content}</Text>
                                <View>
                                    <View style={styles.itemChildBottomBox}>
                                        <Text style={styles.itemChildBottomBoxPrice}>{'￥' + _this.state.lists[i].price}</Text>
                                        <Text style={styles.itemChildBottomBoxText}>{'x' + _this.state.lists[i].number}</Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </TouchableWithoutFeedback>
                </View>
            )
        }
        return itemAry;
    }

    render() {
        let barHeight = StatusBar.currentHeight;
        return (
            <View style={{
                flex: 1,
                // paddingTop: barHeight, 
                backgroundColor: '#fff'
            }}>
                <Header isShowBack={false} title='购物车' />

                <View style={styles.topBox}>
                    <View style={styles.topBoxOne}>
                        <Image style={styles.topBoxOneImg} source={require('../../images/storeIco.png')}/>
                        <Text style={styles.topBoxOneText}>时髦商城</Text>
                    </View>
                    {
                        this.state.lists.length > 0?
                        <View>
                            {
                                this.state.showDel?
                                <Text style={styles.topBoxOneText} onPress={()=>this.changeDel()}>完成</Text>
                                :
                                <Text style={styles.topBoxOneText} onPress={()=>this.changeDel()}>管理</Text>
                            }
                        </View>
                        :
                        null
                    }
                </View>
                {
                    this.state.lists.length > 0?
                    <ScrollView style={styles.centerBoxOne}>
                        <View style={styles.centerBoxOneView}>
                            {this.renderNewsItem()}
                        </View>
                    </ScrollView>
                    :
                    <View style={styles.centerBoxTwo}>
                        <Image style={styles.centerBoxTwoImg} source={require('../../images/null.png')}
                        />
                        <Text style={styles.centerBoxTwoText}>购物车是空的，快去逛逛吧</Text>
                    </View>
                }
                {
                    this.state.lists.length > 0?
                    <View style={styles.bottomBox}>
                        <View style={styles.bottomBoxOne}>
                            <TouchableWithoutFeedback onPress={()=>this.allChecked()}>
                                <View style={{flexDirection: 'row'}}>
                                    <View style={styles.bottomBoxOneView}>
                                        {
                                            this.state.isAllChecked?
                                            <View style={[styles.bottomBoxOneViewText,styles.bottomBoxOneViewTextActiveColor]}></View>
                                            :
                                            <View style={[styles.bottomBoxOneViewText,styles.bottomBoxOneViewTextColor]}></View>
                                        }
                                    </View>
                                    <Text style={styles.bottomBoxOneText}>全选</Text>
                                </View>
                            </TouchableWithoutFeedback>
                            <View style={{flexDirection: 'row',marginRight: 5}}>
                                <Text style={{fontSize: 14, color: '#0048c1'}}>共计：</Text>
                                <Text style={{fontSize: 14, color: '#fe0405'}}>{'￥' + this.state.allMoney}</Text>
                            </View>
                        </View>
                        {
                            this.state.showDel?
                                <TouchableWithoutFeedback 
                                    onPress={()=>this.delSettlement(0)}
                                >
                                    <View style={[styles.bottomBoxTwo,styles.bottomBoxTwoActiveBg]}>
                                        <Text style={styles.bottomBoxTwoText}>删除</Text>
                                    </View>
                                </TouchableWithoutFeedback>
                                :
                                <TouchableWithoutFeedback onPress={()=>this.delSettlement(1)}>
                                    <View style={[styles.bottomBoxTwo,styles.bottomBoxTwoBg]}>
                                        <Text style={styles.bottomBoxTwoText}>结算</Text>
                                    </View>
                                </TouchableWithoutFeedback>
                        }
                    </View>
                    :
                    null
                }
                <Loading 
                    visible={this.state.isModal} 
                    onRequestClose={this._onRequestClose.bind(this)}
                />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    topBox: {flexDirection: 'row',justifyContent: 'space-between',alignItems: 'center', paddingLeft: 12,paddingRight: 12,paddingTop: 7,paddingBottom: 7,borderBottomWidth: 1,borderColor: '#c3c3c3'},
    topBoxOne: {flexDirection: 'row', alignItems: 'center'},
    topBoxOneImg: {width: 20, height: 18,marginRight: 5},
    topBoxOneText: {fontSize: 14, color: '#464646'},

    centerBoxOne: {flex: 1},
    centerBoxOneView: {paddingBottom: 42},
    item: {borderBottomWidth: 1, borderColor: '#eee'},
    itemChild: {height: 92, paddingTop: 8, paddingBottom: 8, backgroundColor: '#fff', flexDirection: 'row'},
    itemChildTop: {width: 30, justifyContent: 'center', alignItems: 'center'},
    itemChildTopText: {width: 11, height: 11, alignItems: 'center', backgroundColor: '#0048c2', borderRadius: 100},
    itemChildTopTextActiveColor: {backgroundColor: '#0048c2'},
    itemChildTopTextColor: {backgroundColor: '#b6b6b6'},
    itemChildCenter: {width: 85, height: 75,marginRight: 10},
    itemChildCenterImg: {width: 85, height: 75},
    itemChildBottom: {flex: 1, paddingRight: 12, justifyContent: 'space-between'},
    itemChildBottomText: {fontSize: 13, color: '#3a3a3a'},
    itemChildBottomBox: {flexDirection: 'row', justifyContent: 'space-between'},
    itemChildBottomBoxText: {fontSize: 11, color: '#828282'},
    itemChildBottomBoxPrice: {fontSize: 12, color: '#fd0408'},
    centerBoxTwo: {flex: 1, justifyContent: 'center', alignItems: 'center', paddingBottom: 42},
    centerBoxTwoImg: {width: 70, height: 70, marginBottom: 15},
    centerBoxTwoText: {fontSize: 12, color: '#9f9d9d'},

    bottomBox: {height: 42, flexDirection: 'row', paddingLeft: 10, position: 'absolute', left: 0, right: 0, bottom: 0, backgroundColor: '#fff', borderTopWidth: 1, borderColor: '#eee'},
    bottomBoxOne: {flex: 1, height: 42, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'},
    bottomBoxOneView: {marginRight: 5, justifyContent: 'center', alignItems: 'center'},
    bottomBoxOneText: {fontSize: 14, color: '#636363'},
    bottomBoxOneViewText: {width: 11, height: 11, borderRadius: 100},
    bottomBoxOneViewTextActiveColor: {backgroundColor: '#0048c2'},
    bottomBoxOneViewTextColor: {backgroundColor: '#b6b6b6'},
    bottomBoxTwo: {width: 105, height: 42, justifyContent: 'center',alignItems: 'center'},
    bottomBoxTwoActiveBg: {backgroundColor: '#f00'},
    bottomBoxTwoBg: {backgroundColor: '#0048c1'},
    bottomBoxTwoText: {fontSize: 14, color: '#fff'},
});